import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { BarChart as _BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { colors } from '@/utils/marketingMap/utils';

echarts.use([TooltipComponent, GridComponent, LegendComponent, _BarChart, CanvasRenderer]);

interface DataItem {
  category: string;
  vins: number;
}

interface TransformedData {
  male: number[];
  female: number[];
}

const transformData = (data: DataItem[]): TransformedData => {
  // 定义男性和女性的类别编号
  const maleCategories = [1, 3, 5, 7, 9, 11];
  const femaleCategories = [2, 4, 6, 8, 10, 12];

  // 初始化男性和女性的数组，默认值为 0
  const maleArray: number[] = new Array(maleCategories.length).fill(0);
  const femaleArray: number[] = new Array(femaleCategories.length).fill(0);

  // 遍历输入数据，填充对应的值
  data.forEach(item => {
    const category = parseInt(item.category, 10); // 将 category 转换为数字
    const vins = item.vins;

    // 检查是否是男性类别
    const maleIndex = maleCategories.indexOf(category);
    if (maleIndex !== -1) {
      maleArray[maleIndex] = vins;
    }

    // 检查是否是女性类别
    const femaleIndex = femaleCategories.indexOf(category);
    if (femaleIndex !== -1) {
      femaleArray[femaleIndex] = vins;
    }
  });

  // 返回结果
  return {
    male: maleArray,
    female: femaleArray,
  };
};

const BarEchart: React.FC<any> = ({ data, name, width = 540 }) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current && data) {
      const chartInstance = echarts.init(chartRef.current);
      const { male, female } = transformData(data);
      const option: echarts.EChartsCoreOption = {
    
        yAxis: [
          {
            type: 'value',
            name,
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 0
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: [
              '18~25(含)',
              '25~30(含)',
              '30~35(含)',
              '35~40(含)',
              '40~45(含)',
              '>45',
            ],
          },
        ],
        grid: {
          left: 20,
          right: 0,
          top: 35,
          bottom: 0,
          containLabel: true, // 如果有需要包含坐标轴标签，可以设置此项
        },
        series: [
          {
            name: '男性',
            type: 'bar',
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: colors[0] 
            },
            data: male,
          },
          {
            name: '女性',
            type: 'bar',
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: colors[1] 
            },
            data: female,
          },
        ],
      };

      chartInstance.setOption(option);

      return () => {
        chartInstance.dispose();
      };
    }

    return;
  }, [chartRef.current, data]);

  return <div ref={chartRef} style={{ width, maxWidth: width, minWidth: width, height: 200 }} />;
};

export default BarEchart;
